<template>
    <div class="page-order-list">
        <div class="page-header">
            <div class="page-header-left" @click="$router.go(-1)">
                <span class="page-header-back"></span>
            </div>
            <div class="page-header-title line-ellipsis">我的想看</div>
            <div class="page-header-right">
                <div class="nav-btn">
                    <img src="../assets/images/nav-button.png" alt="" class="nav-icon">
                </div>
            </div>
        </div>
        <div class="wish-list">
            <div class="item" v-for="item in temp" :key="item.id">
                <div
                  class="main-block clearfix"
                >
                  <div class="avatar">
                    <div class="default-img-bg">
                      <img :src="item.img" alt="" />
                    </div>
                  </div>
                  <div class="mb-outline-b content-wrapper">
                    <div class="content">
                      <div class="movie-title box-flex">
                        <div class="title line-ellipsis">{{item.nm}}</div>
                        <span
                          class="version v2d imax"
                        ></span>
                      </div>
                      <div class="detail">
                        <div class="score line-ellipsis">
                          <span class="score-suffix">观众评分 </span>
                          <span class="grade">{{item.sc}}</span>
                        </div>
                        <!-- <div class="score line-ellipsis">
                          <span class="score-suffix">暂无评分 </span>
                          <span class="grade"></span>
                        </div> -->
                        <div class="actor line-ellipsis">
                          主演:{{item.star}}
                        </div>
                        <div class="show-info line-ellipsis">
                          
                        </div>
                      </div>
                    </div>
                    <div class="button-block">
                      <div class="btn">
                        <span class="fix" @click="quit(item.id)">取消</span>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref } from "vue";
    export default {
        setup() {
           let temp=ref(JSON.parse(window.localStorage.getItem("wish"))==null?[]:JSON.parse(window.localStorage.getItem("wish")))
           let quit=(id)=>{
               let index= temp.value.findIndex(item=>item.id==id)
               temp.value.splice(index,1)
               window.localStorage.setItem("wish",JSON.stringify(temp.value))
            }
          console.log(temp.value);
          return{
            temp,
            quit
          }
        }  
    }
</script>

<style lang="less" scoped>
.page-order-list{
    width: 100%;
    background: #f3f3f3;
    height: 100%;
    overflow-y: hidden;

    .page-header{
        display: flex;
        height: 50px;
        text-align: center;
        color: #fff;
        background: #e54848;

        .page-header-left{
            width: 50px;
            height: 100%;
            line-height: 50px;

            .page-header-back{
                display: inline-flex;
                position: relative;
                width: 16px;
                height: 16px;
                vertical-align: middle;

                &::before{
                    content: "";
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;
                    border-bottom: 2px solid #fff;
                    border-left: 2px solid #fff;
                    transform: rotate(45deg);
                }
            }
        }
        .page-header-title{
            flex: 1;
            line-height: 50px;
            font-size: 18px;
            font-weight: 400;
        }
        .page-header-right{
                position: relative;
                display: flex;
                align-items: center;
                width: 50px;
                height: 100%;
                line-height: 50px;

                .nav-btn{
                    flex: 1;
                    text-align: right;
                    margin-right: 6px;

                    .nav-icon{
                        display: inline-block;
                        width: 17px;
                        height: 16px;
                    }
                }
        }
    }
    .wish-list{
        height: 100%;
        overflow-y: auto;

        .item {
          display: block;
          padding-left: 15px;
          background-color: #fff;

          .main-block {
            width: 100%;
            position: relative;

            .avatar {
              width: 64px;
              height: 95px;
              margin-top: 12px;
              position: relative;
              float: left;

              &::before {
                content: "";
                display: block;
                position: absolute;
                width: 46px;
                height: 46px;
                background-repeat: no-repeat;
                background-size: contain;
              }
              .default-img-bg{
                width: 64px;
                height: 90px;

                &>img{
                  width: 100%;
                  height: 100%;
                }
              }
            }

            .content-wrapper {
              height: 90px;
              max-height: 90px;
              margin-left: 74px;
              position: relative;
              padding: 12px 14px 12px 0;

              .content {
                padding-right: 5px;
                margin-right: 48px;

                .movie-title {
                  height: 24px;
                  margin-bottom: 7px;
                  max-height: 24px;
                  line-height: 24px;

                  .title {
                    font-size: 17px;
                    font-weight: 700;
                    color: #333;
                    padding-right: 5px;
                    flex-shrink: 1;
                  }

                  .v2d {
                    width: 43px;
                    height: 14px;
                    background-image: url(../assets/images/v2dimax.png);
                  }
                }

                .detail {
                  box-sizing: border-box;
                  line-height: 1;
                  overflow: hidden;

                  .score {
                    .grade {
                      font-size: 15px;
                      font-weight: 700;
                      color: #faaf00;
                    }
                  }

                  .show-info,
                  .actor {
                    margin-top: 6px;
                    line-height: 15px;
                  }
                }
              }

              .button-block {
                font-size: 13px;
                position: absolute;
                right: 15px;
                top: 0;
                bottom: 20px;
                height: 100%;
                margin: auto;

                .btn {
                  width: 64px;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: flex-end;
                  box-sizing: border-box;
                  cursor: pointer;
                  border-radius: 14px;

                  .fix {
                    color: rgb(255, 255, 255);
                    white-space: nowrap;
                    font-size: 12px;
                    font-weight: 500;
                    letter-spacing: 0.8px;
                    background-color: rgb(229, 72, 72);
                    padding: 5px 8px;
                    border-radius: 6px;
                  }
                }
              }
            }
          }
        }

    }
}
</style>